<template>
<el-row :gutter="20">
  <el-col :span="8" :offset="7">
  <el-form
    :model="user"
    :rules="rules"
    ref="user"
    label-width="100px"
    class="demo-ruleForm"
    style="height: 380px; margin-top: 150px;"
  >
    <el-form-item label="用户名" prop="petname">
      <el-input v-model="user.petname"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="user.password"></el-input><label style="color: red">{{msg}}</label>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="login()" style="margin-left: 100px;">登录</el-button>
      <el-button @click="regist()">注册</el-button>
    </el-form-item>
  </el-form>
  </el-col>
</el-row>
</template>

<script>

import axios from 'axios'

export default {
  data() {
    return {
      user: {
        petname: "",
        password: ""
      },
      msg: '',
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    login:function() {
     if(this.user.password.length > 6 || this.user.password > 15){
       var u = '/api/consumer-index/around_consumer/login'
                 axios.post(u,this.user).then(res => {
                   if(res.data == ''){
                     this.msg = '用户名不存在或者密码错误!'
                   }else{
                   this.$store.state.user = res.data//将数据存入vuex中
						 // localStorage.setItem("user",this.res.data)
                   this.$router.push("/")
                   }
                 })
     }
    },

    regist:function() {
     this.$router.push("regist")
    }
  }
};
</script>
